<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 300px;
			height: 300px;
			margin: 380px auto 0;
			perspective: 1200px;
		}
		.cube{
			width: 100%;
			height: 100%;
			transition-duration: 5s;
			transform-style: preserve-3d;
			position: relative;
		}
		.cube .box1{
			width: 300px;
			height: 300px;
			position: absolute;
			/*border:1px solid red;*/
			box-shadow: 0 0 30px rgba(255,0,0,0.5) inset;
		}
		.box:hover .cube{
			transform: rotateY(360deg);
		}
		.box:hover .cube>.top{
			transform: translateZ(150px) rotateX(-60deg);
			transform-origin: bottom;
		}
		/*用定位+变换做六个面*/
		.cube .top{
			top:-300px;
			left: 0;
			transform: translateZ(150px) rotateX(90deg); 
			transform-origin: bottom;
			transition-duration: 5s;
		}
		.cube .bottom{
			top: 300px;
			transform: translateZ(150px) rotateX(-90deg);
			transform-origin: top;
		}
		.cube .left{
			left: -150px;
			top: 0;
			transform: rotateY(-90deg);
		}
		.cube .right{
			left: 150px;
			top: 0;
			transform: rotateY(90deg);
		}
		.cube .front{
			transform: translateZ(150px);
		}
		.cube .behind{
			transform: translateZ(-150px);
		}
		/*下面写里面的小盒子*/
		.small{
			width: 200px;
			height: 200px;
			transition-duration: 5s;
			transform-style: preserve-3d;
			position: relative;
			transform: translateX(50px) rotateY(0deg) translateY(-250px);/*把小盒子移进大盒子中*/
		}
		.small .box1{
			width: 200px;
			height: 200px;
			position: absolute;
			/*border:1px solid red;*/
			background-size: cover;
		}
		.box:hover .small{
			transform: translateX(50px) rotateY(360deg) translateY(-600px);
		}
		/*用定位+变换做六个面*/
		.small .top{
			top:-200px;
			left: 0;
			transform: translateZ(100px) rotateX(90deg); 
			transform-origin: bottom;
			background-image: url(images/1.jpg);
		}
		.small .bottom{
			top: 200px;
			transform: translateZ(100px) rotateX(-90deg);
			transform-origin: top;
			background-image: url(images/2.jpg);
		}
		.small .left{
			left: -100px;
			top: 0;
			transform: rotateY(-90deg);
			background-image: url(images/3.jpg);
		}
		.small .right{
			left: 100px;
			top: 0;
			transform: rotateY(90deg);
			background-image: url(images/4.jpg);
		}
		.small .front{
			transform: translateZ(100px);
			background-image: url(images/5.jpg);
		}
		.small .behind{
			transform: translateZ(-100px);
			background-image: url(images/6.jpg);
		}
	</style>
</head>
<body>
	<!-- 
        三维（X,Y,Z）：
        思路：
            1.盒子的布局(核心盒子),建立一个大盒子，在里面包裹一个正方形
            2.正方形里面，处理六个面：
            （top,bottom,left,right,front,behind）
            先做个旋转360动画，在调整六个面的位置，位移，旋转。
            3，在把背景颜色改成字体的颜色,调整字体的大小，位置.
            4，在写格子状，采用平铺线性渐变。
            5,hover上去，六个面取当前文字的颜色。调阴影(也采用当前颜色)，透明度
            6，写动画效果animation,让主正方形转起来，在写中间一个正方形的文字阴影。
            采用以下知识点：
                复位(确定各自的位置（变换：位移，旋转，倾斜，缩放）)
                文字的面板（文字样式的处理）
                3.加些样式（旋转，发光，格子状）
        视镜（景深） -->
	<div class="box">
		<div class="cube">
			<div class="box1 top"></div>
			<div class="box1 bottom"></div>
			<div class="box1 left"></div>
			<div class="box1 right"></div>
			<div class="box1 front"></div>
			<div class="box1 behind"></div>
		</div>
		<div class="small">
			<div class="box1 top"></div>
			<div class="box1 bottom"></div>
			<div class="box1 left"></div>
			<div class="box1 right"></div>
			<div class="box1 front"></div>
			<div class="box1 behind"></div
		</div>
	</div>
</body>
</html>